<template>
  <div class="login-page">
    <div class="login-title">SNT-PASSION</div>
    <Login :class="isRegister ? 'login-f' : ''" @register="register"></Login>
    <Register :class="isRegister ? 'register-f' : ''" @login="login"></Register>
  </div>
</template>

<script setup>
import Login from './Login.vue'
import Register from './Register.vue'
import { ref } from 'vue'
const isRegister = ref(false)
const register = () => {
  isRegister.value = true
}
const login = () => {
  isRegister.value = false
}
</script>

<style scoped lang="scss">
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.login-page {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(@/assets/bg.jpeg);
  background-size: 100% 100%;
  .login-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .login-title {
    font-size: 100px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  .login-f {
    transform: translate(-50%, -50%) rotateY(180deg);
    opacity: 0;
    z-index: 0;
  }
  .register-f {
    transform: translate(-50%, -50%) rotateY(0deg);
    opacity: 1;
    z-index: 1;
  }
}
</style>
